<!-- 我的收藏 -->
<template>
	<view class="page">
		<u-tabs :list="options" :is-scroll="false" :current="current" @change="change"></u-tabs>
		<view class="content" style="height: calc(100vh - 80rpx - env(safe-area-inset-bottom));">
			<swiper class="swiper" :current="current" style="height: 100%;" @change="swiper">
				<swiper-item class="swiper-item" style="height: 100%;" @touchmove.stop>
					<scroll-view scroll-y="true" class="scroll" style="height: 100%;" @scrolltolower="scrollToLower1">
						<view class="none" v-if="leftList.length == 0">
							<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/vip/%E7%A9%BA%E7%8A%B6%E6%80%81.png"></image>
							<view class="txt">这里空空如也</view>	
						</view>
						<u-swipe-action btn-width="130" :options="option" :show="item.show" v-for="item in leftList" :key="item.positionListId"
							@open="open(item.id)" @click="cli" @content-click.stop="linkDetail(item)">
							<view class="goods">
								<list :item="item" collection="true"></list>
								<view class="line" style="height: 20rpx;background-color: #999999;line-height: 0;">

								</view>
							</view>
						</u-swipe-action>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item" style="height: 100%;" @touchmove.stop>
					<view class="article">
						<view class="title flex justify-between">
							<SwitchLink name1="全部文章" name2="只看精华" :cur="current1" @curren="curren1"></SwitchLink>
						</view>
						<view class="scorll">
							<scroll-view scroll-y="true" @scrolltolower="scrollToLower2"
								:style="{'height': `calc(100vh - 80rpx - ${titleHeight}px - env(safe-area-inset-bottom))`}">
								<view class="none" v-if="article.length == 0">
									<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/vip/%E7%A9%BA%E7%8A%B6%E6%80%81.png"></image>
									<view class="txt">这里空空如也</view>	
								</view>
								<Article class="article" @fresh="fresh" :item="item" v-for="item in article" :key="item.articleListId"></Article>
							</scroll-view>
						</view>
					</view>
				</swiper-item>
				<swiper-item class="swiper-item" style="height: 100%;" @touchmove.stop>
					<scroll-view scroll-y="true" class="scroll" style="height: 100%;" @scrolltolower="scrollToLower3">
						<view class="none" v-if="list.length == 0">
							<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/vip/%E7%A9%BA%E7%8A%B6%E6%80%81.png"></image>
							<view class="txt">这里空空如也</view>	
						</view>
						<view class="list">
							<Activity v-for="item in list" :key="item.activityDetailList" :item="item"></Activity>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import SwitchLink from '@/components/switch/switch.vue'
	import Article from '@/components/article/article.vue'
	import Activity from '@/components/activity/activity.vue'
	import List from '@/components/list/list.vue'
	export default {
		components: {
			SwitchLink,
			Article,
			Activity,
			List
		},
		data() {
			return {
				titleHeight: 0,
				options: [{
					name: '岗位'
				}, {
					name: '文章'
				}, {
					name: '活动'
				}],
				current: 0,
				article:[],
				list:[],
				leftList:[],
				positionQurey:{
					pageNum: 1,
					pagesize: 10
				},
				articleQurey:{
					pageNum: 1,
					pagesize: 10,
					type: 2
				},
				activityQurey:{
					pageNum: 1,
					pagesize: 10
				},
				current0: 0,
				current1: 0,
				current2: 0,
				option: [{
					style: {
						backgroundImage: 'url(https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/my/delete.png)',
						backgroundRepeat: 'no-repeat',
						backgroundSize: '70rpx 70rpx',
						backgroundPosition: 'center center'
					}
				}]
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
			//初始化
			init() {
				this._getTitleHeight()
				this.getPosition()
				this.getArticle()
				this.getActivity()
			},
			async getPosition(){
				let {data: leftlist} = await this.$get('/user/positionCollectPage',this.positionQurey)
				 this.leftList = this.leftList.concat(leftlist.records)
			},
			scrollToLower1(){
				this.positionQurey.pageNum++
				this.getPosition()
			},
			fresh(){
				this.articleQurey.pageNum = 1
				this.article = []
				this.getArticle()
			},
			async getArticle(){
				let {data: article} = await this.$get('/user/articleListPage',this.articleQurey)
				this.article = this.article.concat(article.records) 
			},
			scrollToLower2(){
				this.articleQurey.pageNum++
				this.getArticle()
			},
			async getActivity(){
				let {data: list} = await this.$get('/user/activityListPage',this.activityQurey)
				this.list = this.list.concat(list.records) 
			},
			scrollToLower3(){
				this.activityQurey.pageNum++
				this.getActivity()
			},
			//顶部标签切换
			change(e) {
				this.current = e
			},
			//获取切换按钮高度
			_getTitleHeight() {
				uni.createSelectorQuery().select('.title').boundingClientRect(item => {
					this.titleHeight = item.height
				}).exec()
			},
			//切换最新与精华
			curren0(id) {
				this.current0 = id
			},
			curren1(id) {
				this.current1 = id
				if(id == 0){
					this.articleQurey.type = 2
				}else{
					this.articleQurey.type = 1
				}
				this.article = []
				this.articleQurey.pageNum = 1
				this.getArticle()
			},
			curren2(id) {
				this.current2 = id
			},
			//职位列表点击进入详情页
			linkDetail(e) {
				uni.setStorageSync('pageNum',e.positionListId)
				uni.navigateTo({
					url: '/pagesB/positionDetail/positionDetail'
				})
			},
			//滑块打开和关闭
			open(index) {
				console.log(index)
				this.leftList.forEach(item => {
					if (index == item.id) {
						item.show = true;
					}else{
						item.show = false;
					}
				})
				console.log(this.leftList)
			},
			//滑块组件点击事件(删除逻辑)
			cli(e) {
				console.log(2)
			},
			//滑动事件
			swiper(e) {
				this.current = e.detail.current
			},
		}
	}
</script>

<style lang="scss">
	.page {
		.line:last-child{
			background-color: #FFFFFF !important;
		}
					.none{
						position: absolute;
						left:50%;
						top:50%;
						transform: translate(-57%,-50%);
						image{
							width: 250rpx;
							height: 250rpx;
						}
						.txt{
							padding-top: 40rpx;
							color: #999999;
							font-size: 24rpx;
							display: flex;
							justify-content: center;
						}
					}
		.content {
			.swiper {
				.swiper-item {
					.article {
						.title {
							.right {
								text {
									font-weight: 500;
									color: #333333;
									font-size: 24rpx;
								}

								.icon {
									width: 31rpx;
									height: 23rpx;
								}
							}
						}

						.scorll {
							.article:last-child {
								.item {
									border-bottom: none;
								}
							}
						}
					}

					.list {
						padding: 30rpx;
					}
				}
			}
		}
	}
</style>
